<!doctype html>
<style>
  html {
  }
  body {
  }
  #warning {
    font-size: 14px;
    color: red;
    background-color: rgba(255,0,0,0.1);
  }
  .hide {
    display:none;
  }
  #target {
    background: yellow;
  }

</style>

<p id="warning" class="hide">ResizeObserver not detected. Demo will not work.</p>
<div id="target">
<p>I am an iframe that will change its size to fit all this text.</p>
<img src="http://lorempixel.com/120/120">
<p>Just for fun, there was an image in the middle.</p>
</div>
<script src="iframeResize.js"></script>
<script>
try {
  iframeResize.setupIframe();
} catch(ex) {
  document.querySelector("#warning").classList.remove("hide");
}
</script>

<script>
// if (!window.ResizeObserver) {
//   document.querySelector('#warning').classList.remove('hide');
//   throw "No ResizeObserver";
// }

// let ro = new ResizeObserver(entries => {
//   for (entry of entries)
//     if (entry.target.handleResize)
//       entry.target.handleResize(entry);
// });

// document.body.handleResize = function(entry) {
//   let idealWidth, idealHeight;
//   let saveOverflow = document.scrollingElement.style.overflow;
//   // Hide scrollbars before
//   document.scrollingElement.style.overflow = "hidden";
//   if (document.body.scrollWidth > window.innerWidth) {
//     // If document is wider than iframe, resize to scroll width
//     idealWidth = document.scrollingElement.scrollWidth;
//   } else {
//     // Document is narrower, resize to offset width
//     idealWidth = document.scrollingElement.offsetWidth;
//   }
//   if (document.body.scrollHeight > window.innerHeight) {
//     // document is taller than iframe, resize to scroll height
//     idealHeight = document.scrollingElement.scrollHeight;
//   } else {
//     idealHeight = document.scrollingElement.offsetHeight;
//   }
//   document.scrollingElement.style.overflow = saveOverflow;
//   window.parent.postMessage({
//      name: "iframeResize",
//      width: idealWidth,
//      height: idealHeight
//   }, '*');
// }

// ro.observe(document.body);

</script>
